<template>
  <div v-loading="loading" element-loading-text="加载中...">
    <el-button type="primary" v-if="sys_role" @click="dialogFormVisible = true">添加管理员<i
        class="iconfont iconxinzeng"></i></el-button>

    <el-dialog title="添加管理员" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form status-icon :rules="rules" ref="ruleForm" :model="ruleForm" label-width="80px">
        <el-form-item label="账号" prop="username">
          <el-input placeholder="管理员账号" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="管理员密码" v-model="ruleForm.password" type="password" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">
          立即添加</el-button>
      </div>
    </el-dialog>


    <el-table :data="tableData" style="width: 100%" @expand-change="exChange" :row-key="getRowKeys"
      :expand-row-keys="expands">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city.qx" :key="city.qx" :disabled="disabled">
              {{city.role_name}}</el-checkbox>
          </el-checkbox-group>
          <br />
          <span style="float:right">
            <el-button type="primary" v-show="qx" plain @click="fpqx" v-if="sys_role">分配权限</el-button>

            <el-button-group v-show="!qx">
              <el-button type="info" icon="el-icon-close" plain @click="cancel">取消</el-button>
              <el-button type="success" plain icon="el-icon-check" @click="save(scope.$index,scope.row)">保存</el-button>
            </el-button-group>

          </span>
        </template>
      </el-table-column>
      <el-table-column label="管理员账号" prop="username"> </el-table-column>
      <el-table-column label="添加时间" prop="datetime"> </el-table-column>
      <el-table-column label="操作" prop="desc" width="200" align="center" v-if="sys_role">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" @click="deleteadmin(scope.$index , scope.row)">
          </el-button>
          <el-button type="warning" icon="el-icon-s-tools" @click="edit(scope.$index , scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <div style="text-align: center;">
        <br />
        <br />
        <p class="textcneter">管理员账号是： {{u}}</p>
        <p class="resetpass">
          <el-button type="primary" plain @click="resetpass">一键重置密码</el-button>
        </p>
        <p class="textcneter">说明：重置密码为：123456</p>
      </div>
    </el-drawer>



  </div>
</template>


<script>
  import {
    ApiPoweradmin,
    ApiPoweraddadmin,
    ApiPowerdeladmin,
    ApiPowerRoles,
    ApiPowerrolesQX,
    ApiPowerrolesqxFP,
    ApiAdminSetpassword,
  } from "@/api/api";
  export default {
    data() {
      var validateUser = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入管理员账号"));
        } else {
          callback();
        }
      };
      var validatemiao = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入管理员密码"));
        } else {
          callback();
        }
      };
      return {
        loading: true,
        tableData: [],
        checkedCities: [], //默认选中
        cities: [], //展示所有的多选
        expands: [], //控制展开行使用
        checkedCount: [], //点击多选框
        getRowKeys(row) {
          return row.username;
        },
        disabled: true,
        qx: true, //分配权限按钮显示隐藏
        dialogFormVisible: false,
        rules: {
          username: [{
            validator: validateUser,
            trigger: "blur",
          }, ],
          password: [{
            validator: validatemiao,
            trigger: "blur",
          }, ],
        },
        ruleForm: {
          username: "",
          password: "",
        },
        sys_role: false,
        cancelchecked: [], //取消选中的
        drawer: false,
        u: "",
      };
    },
    created() {
      this.request();
    },
    methods: {
      request() {
        ApiPoweradmin().then((res) => {
          this.tableData = res.data;
          this.sys_role = res.qx.indexOf(1) > -1 ? true : false;
          this.loading = false;
        });
      },

      exChange(row, expandedRows) {
        let that = this;
        if (expandedRows.length) {
          that.expands = [];
          if (row) {
            ApiPowerRoles().then((res) => {
              this.cities = res.data;
            });
            ApiPowerrolesQX({
              username: row.username,
            }).then((res) => {
              if (res.code == 400) {
                this.$message({
                  message: res.message,
                  type: "warning",
                });
                let data = res.data.map((v) => {
                  return v.qx;
                });
                this.checkedCities = data;
                this.cancelchecked = data;
              } else {
                let data = res.data.map((v) => {
                  return v.qx;
                });
                this.checkedCities = data;
                this.cancelchecked = data;
              }
            });
            that.expands.push(row.username); // 每次push进去的是每行的username
            this.disabled = true;
            this.qx = true;
          }
        } else {
          that.expands = []; // 默认不展开
        }
      },
      fpqx() {
        this.disabled = false;
        this.qx = false;
      },
      cancel() {
        this.disabled = true;
        this.qx = true;
        this.checkedCities = this.cancelchecked;
      },
      save(index, row) {
        ApiPowerrolesqxFP({
          username: row.username,
          fpqx: this.checkedCount,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });

            this.expands = [];
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });
      },
      edit(index, row) {
        this.drawer = true;
        this.u = row.username;
      },
      resetpass() {
        ApiAdminSetpassword({
          username: this.u,
        }).then((res) => {
          if (res.code == 200) {
            this.drawer = false;
            this.$message({
              message: res.message,
              type: "success",
            });
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });
      },
      handleCheckedCitiesChange(value) {
        this.checkedCount = value;
      },
      deleteadmin(index, row) {
        this.$confirm(`将删除"${row.username}"此账号, 是否确定?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            type: "warning",
            center: true,
          })
          .then(() => {
            ApiPowerdeladmin({
              username: row.username,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
                this.request();
              } 
            });
          })
          .catch(() => {});
      },
      quxiao(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            ApiPoweraddadmin({
              username: this.ruleForm.username,
              password: this.ruleForm.password,
            }).then((res) => {
              if (res.code == 400) {
                this.$message({
                  message: res.message,
                  type: "warning",
                });
              } else {
                if (res.code == 200) {
                  this.dialogFormVisible = false;
                  this.$refs[formName].resetFields();
                  this.request();
                  this.$message({
                    message: res.message,
                    type: "success",
                  });
                } else {
                  this.$message({
                    message: res.message,
                    type: "warning",
                  });
                }
              }
            });
          }
        });
      },
    },
  };

</script>
<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .resetpass {
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 126px;
    margin-top: 50%;
  }

</style>
